import React, {useEffect} from "react";
import {ImageExportDrawerProp, ImageExportFormProp} from "@/pages/docker/modules";
import {Button, Drawer, Form, Input, InputNumber, Radio, Space} from "antd";

const ImagesExport: React.FC<ImageExportDrawerProp> = ({visible, target, close}) => {

    const [form] = Form.useForm<ImageExportFormProp>();


    const submitForm = () => {

    }

    useEffect(() => {
        if (visible && target) {
            form.setFieldsValue({imageId: target.id})
        }
        return () => {
            form.resetFields();
        }
    }, [visible])

    return <Drawer
        width={500}
        title="镜像导出"
        placement="right"
        onClose={close}
        open={visible}
        extra={
            <Space>
                <Button type="primary" danger onClick={close}>取消</Button>
                <Button type="primary" onClick={submitForm}>导出</Button>
            </Space>
        }
    >
        <Form labelCol={{ span: 4 }}
              wrapperCol={{ span: 20 }}
              form={form}
              layout="horizontal"
              name="form_in_modal"
        >
            <Form.Item name="imageId" label="镜像名称" rules={[{ required: true, message: '请输入镜像名称' }]}>
                <Input placeholder="请输入镜像名称" />
            </Form.Item>
            <Form.Item name="path" label="保存路径" rules={[{ required: true, message: '请输入保存镜像的地址' }]}>
                <Input style={{width: '100%'}} placeholder="请输入保存镜像的地址" />
            </Form.Item>
            <Form.Item name="stars" label="镜像名称" rules={[{ required: true, message: '请输入导出镜像的名称' }]}>
                <Input style={{width: '100%'}} placeholder="请输入导出镜像的名称" />
            </Form.Item>
        </Form>

    </Drawer>
}

export default ImagesExport;